<template>
  <div
    class="scg-button-container"
    :class="{
      smallize: size == 'small',
      mediumSize: size == 'medium',
      largeSize: size == 'large',
      border: border,
      defaultType: type === 'default',
      primaryType: type === 'primary',
      successType: type === 'success',
      warningType: type === 'warning',
      dangerType: type === 'danger',
      disabledType: disabled,
      loadingType: loading,
    }"
    :style="{ color: color }"
    @click="handelClick($event)"
  >
    <!-- 加载状态 -->
    <div v-if="loading" class="">
      <span class="iconfont icon-jiazai1 icon-loading"></span>
    </div>
    <!-- 禁用状态 -->
    <!-- 前缀图标 -->
    <div class="scg-button-prefix" v-if="prefixIcon != ''">
      <span
        class="iconfont csg-button-icon csg-button-icon-prefix"
        :class="prefixIcon"
        :style="{ color: prefixIconColor }"
      ></span>
    </div>
    <!-- 前缀插槽 -->
    <slot name="prefix"></slot>
    <!-- 默认插槽 -->
    <slot></slot>
    <!-- 后缀插槽 -->
    <slot name="suffix"></slot>
    <!-- 后缀图标 -->
    <div class="scg-button-suffix" v-if="suffixIcon != ''">
      <span
        class="iconfont csg-button-icon scg-button-icon-suffix"
        :class="suffixIcon"
        :style="{ color: suffixIconColor }"
      ></span>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, defineEmits, defineProps } from 'vue';

/**
 * 按钮类型 - 颜色映射
default  - #7382EE （蓝）
primary  - #D1D7FF （亮蓝）
success  - #67C23A （绿）
warning  - #FF7A00 （橙黄）
danger   - #F56C6C （红）
 */

const props = defineProps({
  name: {
    type: String,
    default: '默认按钮',
  },
  color: {
    type: String,
    default: 'white',
  },
  size: {
    type: String,
    default: 'small',
    validator: (val) => {
      return val ? ['small', 'medium', 'large'].includes(val) : true;
    },
  },
  border: {
    type: Boolean,
    default: true,
  },
  type: {
    type: String,
    default: 'default',
    validator: (val) => {
      return val
        ? ['default', 'primary', 'success', 'warning', 'danger'].includes(val)
        : true;
    },
  },
  prefixIcon: {
    type: String,
    default: '',
  },
  suffixIcon: {
    type: String,
    default: '',
  },
  prefixIconColor: {
    type: String,
    default: 'white',
  },
  suffixIconColor: {
    type: String,
    default: 'white',
  },
  loading: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['btnClick']);
const handelClick = (e: Event) => {
  if (props.disabled || props.loading) {
    e.preventDefault(); // 阻止默认行为
    e.stopPropagation(); // 阻止冒泡
    return;
  }
  emit('btnClick', { name: props.name, color: props.color });
};
</script>

<style lang="scss" scoped>
.scg-button-container {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  min-width: 80px;
  min-height: 32px;
}

.smallSize {
  font-size: 12px;
  padding: 0px;
}
.mediumSize {
  font-size: 14px;
  padding: 2px;
}
.largeSize {
  font-size: 16px;
  padding: 4px;
}

.border {
  border-radius: 4px;
}
.defaultType {
  background-color: #7382ee;
  &:hover {
    filter: brightness(90%);
  }
}

.primaryType {
  background-color: #d1d7ff;
  &:hover {
    filter: brightness(90%);
  }
}

.successType {
  background-color: #10b981;
  &:hover {
    filter: brightness(90%);
  }
}

.warningType {
  background-color: #ff7a00;
  &:hover {
    filter: brightness(90%);
  }
}

.dangerType {
  background-color: #ef4444;
  &:hover {
    filter: brightness(90%);
  }
}
.disabledType {
  background-color: #98989b;
  filter: brightness(90%);
  cursor: not-allowed;
}
.loadingType {
  background-color: #d1d5db;
  cursor: not-allowed;
  &:hover {
    filter: brightness(90%);
  }
}

.icon-loading {
  display: inline-block;
  animation: icon-loading 1s linear infinite;
}

@keyframes icon-loading {
  0% {
    transform: rotate(0deg);
    transform-origin: center center;
  }
  100% {
    transform: rotate(360deg);
    transform-origin: center center;
  }
}
</style>
